<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>GTK+ Widgets II</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK+ Widgets II, GTK+ library, C">
<meta name="description" content="GTK+ Widgets II">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>GTK+ Widgets II</h1>

<p>
In this part of the GTK+ programming tutorial, we will continue introducing 
various GTK+ widgets. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>

<h2>GtkComboBox</h2>

<p>
<b class="keyword">GtkComboBox</b> is a widget that allows the user to choose 
from a list of options.
</p>

<pre class="code">
#include &lt;gtk/gtk.h&gt;

void combo_selected(GtkWidget *widget, gpointer window)
{ 
  gchar *text =  gtk_combo_box_get_active_text(GTK_COMBO_BOX(widget));
  gtk_label_set_text(GTK_LABEL(window), text);
  g_free(text);
}


int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *fixed;
  GtkWidget *combo;
  GtkWidget *label;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "GtkCombo");
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 230, 150);
  
  fixed = gtk_fixed_new();

  combo = gtk_combo_box_new_text();
  gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Ubuntu");
  gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Mandriva");
  gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Fedora");
  gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Mint");
  gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Gentoo");
  gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Debian");

  gtk_fixed_put(GTK_FIXED(fixed), combo, 50, 50);
  gtk_container_add(GTK_CONTAINER(window), fixed);

  label = gtk_label_new("-");
  gtk_fixed_put(GTK_FIXED(fixed), label, 50, 110);

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), G_OBJECT(window));

  g_signal_connect(G_OBJECT(combo), "changed", 
        G_CALLBACK(combo_selected), (gpointer) label);

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}
</pre>

<p>
The example shows a combo box and a label. The combo box has a list of six 
options. These are the names of Linux Distros.
The label widget shows the selected option from the combo box.  
</p>

<pre class="explanation">
 combo = gtk_combo_box_new_text();
 gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Ubuntu");
 gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Mandriva");
 gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Fedora");
 gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Mint");
 gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Gentoo");
 gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Debian");
</pre>

<p>
We create a <b class="keyword">GtkComboBox</b> and fill it with a list of 
Linux Distribution names. 
</p>

<pre class="explanation">
 label = gtk_label_new("-");
</pre>

<p>
We also create a label widget. 
</p>

<pre class="explanation">
 gchar *text =  gtk_combo_box_get_active_text(GTK_COMBO_BOX(widget));
 gtk_label_set_text(GTK_LABEL(window), text);
 g_free(text);
</pre>

<p>
We get the selected text and set the label text to it. The documentation 
to the combo box says, that <b class="keyword">gtk_combo_box_get_active_text()</b> 
returns a newly allocated string containing the currently active text.
This means, that we must free the memory.
</p>


<br>
<img src="/img/gui/cgtk/gtkcombobox.png" alt="GktComboBox">
<div class="figure">Figure: GtkComboBox</div>
<br>


<h2>GtkHSeparator</h2>

<p>
The <b class="keyword">GtkHSeparator</b> is is a horizontal separator. 
It is a kind of an ornament widget.
This widgets serves some design purposes. There is also a sister 
<b class="keyword">GtkVSeparator</b> widget. 
</p>

<pre class="code">

#include &lt;gtk/gtk.h&gt;



int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *label1;
  GtkWidget *label2;
  GtkWidget *hseparator;
  GtkWidget *vbox;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_title(GTK_WINDOW(window), "GtkHSeparator");
  gtk_window_set_resizable(GTK_WINDOW(window), FALSE);

  gtk_container_set_border_width(GTK_CONTAINER(window), 20);

  label1 = gtk_label_new("Zinc is a moderately reactive, blue gray metal \
that tarnishes in moist air and burns in air with a bright bluish-green flame,\
giving off fumes of zinc oxide. It reacts with acids, alkalis and other non-metals.\
If not completely pure, zinc reacts with dilute acids to release hydrogen.");

  gtk_label_set_line_wrap(GTK_LABEL(label1), TRUE);

  label2 = gtk_label_new("Copper is an essential trace nutrient to all high \
plants and animals. In animals, including humans, it is found primarily in \
the bloodstream, as a co-factor in various enzymes, and in copper-based pigments. \
However, in sufficient amounts, copper can be poisonous and even fatal to organisms.");

  gtk_label_set_line_wrap(GTK_LABEL(label2), TRUE);

  vbox = gtk_vbox_new(FALSE, 10);
  gtk_container_add(GTK_CONTAINER(window), vbox);

  hseparator = gtk_hseparator_new();

  gtk_box_pack_start(GTK_BOX(vbox), label1, FALSE, TRUE, 0);
  gtk_box_pack_start(GTK_BOX(vbox), hseparator, FALSE, TRUE, 10);
  gtk_box_pack_start(GTK_BOX(vbox), label2, FALSE, TRUE, 0);


  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), G_OBJECT(window));

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}
</pre>

<p>
The code example shows definitions of two chemical elements. They are 
separated by a horizontal separator. 
This makes the example more visually appealing.
</p>

<pre class="explanation">
   label1 = gtk_label_new("Zinc is a moderately reactive, blue gray metal \
that tarnishes in moist air and burns in air with a bright bluish-green flame,\
giving off fumes of zinc oxide. It reacts with acids, alkalis and other non-metals.\
If not completely pure, zinc reacts with dilute acids to release hydrogen.");
</pre>

<p>
We create the first label, the definition of the Zinc element. 
</p>

<pre class="explanation">
 gtk_label_set_line_wrap(GTK_LABEL(label2), TRUE);
</pre>

<p>
We wrap the text. 
</p>

<pre class="explanation">
hseparator = gtk_hseparator_new();
</pre>

<p>
We create a horizontal separator. 
</p>

<pre class="explanation">
 gtk_box_pack_start(GTK_BOX(vbox), label1, FALSE, TRUE, 0);
 gtk_box_pack_start(GTK_BOX(vbox), hseparator, FALSE, TRUE, 10);
 gtk_box_pack_start(GTK_BOX(vbox), label2, FALSE, TRUE, 0);
</pre>

<p>
We place the separator between the labels. 
</p>


<br>
<img src="/img/gui/cgtk/separator.png" alt="GtkHSeparator">
<div class="figure">Figure: GtkHSeparator</div>
<br>

<h2>GtkEntry</h2>

<p>
<b class="keyword">GtkEntry</b> is a single line text entry field. 
This widget is used to enter textual data. 
</p>

<pre class="code">
#include &lt;gtk/gtk.h&gt;


int main(int argc, char *argv[]) {

  GtkWidget *window;
  GtkWidget *table;

  GtkWidget *label1;
  GtkWidget *label2;
  GtkWidget *label3;

  GtkWidget *entry1;
  GtkWidget *entry2;
  GtkWidget *entry3;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_title(GTK_WINDOW(window), "GtkEntry");
  gtk_container_set_border_width(GTK_CONTAINER(window), 10);

  table = gtk_table_new(3, 2, FALSE);
  gtk_container_add(GTK_CONTAINER(window), table);

  label1 = gtk_label_new("Name");
  label2 = gtk_label_new("Age");
  label3 = gtk_label_new("Occupation");


  gtk_table_attach(GTK_TABLE(table), label1, 0, 1, 0, 1, 
      GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);
  gtk_table_attach(GTK_TABLE(table), label2, 0, 1, 1, 2, 
      GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);
  gtk_table_attach(GTK_TABLE(table), label3, 0, 1, 2, 3, 
      GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);

  entry1 = gtk_entry_new();
  entry2 = gtk_entry_new();
  entry3 = gtk_entry_new();

  gtk_table_attach(GTK_TABLE(table), entry1, 1, 2, 0, 1, 
      GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);
  gtk_table_attach(GTK_TABLE(table), entry2, 1, 2, 1, 2, 
      GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);
  gtk_table_attach(GTK_TABLE(table), entry3, 1, 2, 2, 3, 
      GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);

  gtk_widget_show(table);

  gtk_widget_show(label1);
  gtk_widget_show(label2);
  gtk_widget_show(label3);

  gtk_widget_show(entry1);
  gtk_widget_show(entry2);
  gtk_widget_show(entry3);

  gtk_widget_show(window);

  g_signal_connect(window, "destroy",
      G_CALLBACK(gtk_main_quit), NULL);

  gtk_main();

  return 0;
}
</pre>

<p>
In our example we show three text entries and three labels.
</p>

<pre class="explanation">
 table = gtk_table_new(3, 2, FALSE);
 gtk_container_add(GTK_CONTAINER(window), table);
</pre>

<p>
To organize our widgets, we use the table container widget. 
</p>

<pre class="explanation">
 entry1 = gtk_entry_new();
 entry2 = gtk_entry_new();
 entry3 = gtk_entry_new();
</pre>

<p>
Here we create three text entries. 
</p>

<pre class="explanation">
 gtk_table_attach(GTK_TABLE(table), entry1, 1, 2, 0, 1, 
     GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);
 gtk_table_attach(GTK_TABLE(table), entry2, 1, 2, 1, 2, 
     GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);
 gtk_table_attach(GTK_TABLE(table), entry3, 1, 2, 2, 3, 
     GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5);
</pre>

<p>
We attach the widgets to the table widget. 
</p>


<br>
<img src="/img/gui/cgtk/gtkentry.png" alt="GtkEntry">
<div class="figure">Figure: GtkEntry</div>
<br>



<h2>GtkImage</h2>

<p>
<b class="keyword">GtkImage</b> is a widget used to display an image. 
</p>


<pre class="code">
#include &lt;gtk/gtk.h&gt;


int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *image;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 230, 150);
  gtk_window_set_title(GTK_WINDOW(window), "Red Rock");
  gtk_window_set_resizable(GTK_WINDOW(window), FALSE);

  gtk_container_set_border_width(GTK_CONTAINER(window), 2);

  image = gtk_image_new_from_file("redrock.png");
  gtk_container_add(GTK_CONTAINER(window), image);


  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), G_OBJECT(window));

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}
</pre>

<p>
In our example we show an image of a castle. 
</p>

<pre class="explanation">
 gtk_container_set_border_width(GTK_CONTAINER(window), 2);
</pre>

<p>
We put a small 2px border around the picture.  
</p>

<pre class="explanation">
 image = gtk_image_new_from_file("redrock.png");
 gtk_container_add(GTK_CONTAINER(window), image);
</pre>

<p>
We load an image from the file and add it into the container. 
</p>



<h2>GtkStatusbar</h2>

<p>
<b class="keyword">GtkStatusbar</b> displays status information. 
It is placed at the bottom of the application window. 
</p>


<pre class="code">
#include &lt;gtk/gtk.h&gt;


void button_pressed(GtkWidget *widget, gpointer window)
{
   gchar *str;
   str = g_strdup_printf("Button %s clicked", 
         gtk_button_get_label(GTK_BUTTON(widget)));

   gtk_statusbar_push(GTK_STATUSBAR(window),
         gtk_statusbar_get_context_id(GTK_STATUSBAR(window), str), str);
   g_free(str);
}

int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *fixed;
  GtkWidget *button1;
  GtkWidget *button2;
  GtkWidget *statusbar;
  GtkWidget *vbox;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 280, 150);
  gtk_window_set_title(GTK_WINDOW(window), "GtkStatusbar");

  vbox = gtk_vbox_new(FALSE, 2);

  fixed = gtk_fixed_new();
  gtk_container_add(GTK_CONTAINER(window), vbox);

  gtk_box_pack_start(GTK_BOX(vbox), fixed, TRUE, TRUE, 1);

  button1 = gtk_button_new_with_label("OK");
  gtk_widget_set_size_request(button1, 80, 30 );
  button2 = gtk_button_new_with_label("Apply");
  gtk_widget_set_size_request(button2, 80, 30 );

  gtk_fixed_put(GTK_FIXED(fixed), button1, 50, 50);
  gtk_fixed_put(GTK_FIXED(fixed), button2, 150, 50);


  statusbar = gtk_statusbar_new();
  gtk_box_pack_start(GTK_BOX(vbox), statusbar, FALSE, TRUE, 1);

  g_signal_connect(G_OBJECT(button1), "clicked", 
           G_CALLBACK(button_pressed), G_OBJECT(statusbar));

  g_signal_connect(G_OBJECT(button2), "clicked", 
           G_CALLBACK(button_pressed), G_OBJECT(statusbar));

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), G_OBJECT(window));

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}
</pre>

<p>
In our code example we show two buttons and a statusbar. If we click 
on the button, a message is displayed in the statusbar.
It says, which button we have pressed. 
</p>

<pre class="explanation">
 gchar *str;
 str = g_strdup_printf("Button %s clicked", 
       gtk_button_get_label(GTK_BUTTON(widget)));
</pre>

<p>
We create a message. 
</p>

<pre class="explanation">
 gtk_statusbar_push(GTK_STATUSBAR(window),
      gtk_statusbar_get_context_id(GTK_STATUSBAR(window), str), str);
</pre>

<p>
We show the message in the statusbar. 
</p>


<br>
<img src="/img/gui/cgtk/gtkstatusbar.png" alt="GtkStatusbar">
<div class="figure">Figure: GtkStatusbar</div>
<br>



<h2>GtkIconView</h2>

<p>
The GtkIconView is a widget which displays a list of icons in a grid.
</p>

<pre class="code">
#include &lt;gtk/gtk.h&gt;
#include &lt;assert.h&gt;

enum
{
  COL_DISPLAY_NAME,
  COL_PIXBUF,
  NUM_COLS
};


GtkTreeModel * init_model(void)
{
  GtkListStore *list_store;
  GdkPixbuf *p1, *p2, *p3, *p4;
  GtkTreeIter iter;
  GError *err = NULL;


  p1 = gdk_pixbuf_new_from_file("ubuntu.png", &amp;err); 
  p2 = gdk_pixbuf_new_from_file("gnumeric.png", &amp;err);
  p3 = gdk_pixbuf_new_from_file("blender.png", &amp;err);
  p4 = gdk_pixbuf_new_from_file("inkscape.png", &amp;err);

  assert(err==NULL);	

  list_store = gtk_list_store_new(NUM_COLS, 
      G_TYPE_STRING, GDK_TYPE_PIXBUF);

  int i = 0;
  for (i; i < 50; i++) {
    gtk_list_store_append(list_store, &amp;iter);
    gtk_list_store_set(list_store, &amp;iter, COL_DISPLAY_NAME, 
        "ubuntu", COL_PIXBUF, p1, -1);
    gtk_list_store_append(list_store, &amp;iter);
    gtk_list_store_set(list_store, &amp;iter, COL_DISPLAY_NAME, 
        "gnumeric", COL_PIXBUF, p2, -1);
    gtk_list_store_append(list_store, &amp;iter);
    gtk_list_store_set(list_store, &amp;iter, COL_DISPLAY_NAME, 
        "blender", COL_PIXBUF, p3, -1);
    gtk_list_store_append(list_store, &amp;iter);
    gtk_list_store_set(list_store, &amp;iter, COL_DISPLAY_NAME, 
        "inkscape", COL_PIXBUF, p4, -1);
  } 

  return GTK_TREE_MODEL(list_store);
}

int main (int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *icon_view;
  GtkWidget *sw;

  gtk_init (&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

  gtk_window_set_title(GTK_WINDOW (window), "Icon View");
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_container_set_border_width(GTK_CONTAINER(window), 10);
  gtk_widget_set_size_request(window, 350, 330);

  sw = gtk_scrolled_window_new(NULL, NULL);
  gtk_container_add(GTK_CONTAINER (window), sw);
  gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(sw),
      GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);
  gtk_scrolled_window_set_shadow_type(GTK_SCROLLED_WINDOW(sw),
      GTK_SHADOW_IN);

  icon_view = gtk_icon_view_new_with_model(init_model());
  gtk_container_add(GTK_CONTAINER(sw), icon_view);
	
  gtk_icon_view_set_text_column(GTK_ICON_VIEW(icon_view),
      COL_DISPLAY_NAME);
  gtk_icon_view_set_pixbuf_column(GTK_ICON_VIEW(icon_view), 
      COL_PIXBUF);
  gtk_icon_view_set_selection_mode(GTK_ICON_VIEW(icon_view), 
      GTK_SELECTION_MULTIPLE);

  g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

  gtk_widget_show_all(window);
	
  gtk_main();
	
  return 0;
}
</pre>

<p>
The example will display 200 icons. The icons represent four prominent 
open source projects. 
</p>

<pre class="explanation">
 p1 = gdk_pixbuf_new_from_file("ubuntu.png", &amp;err); 
 p2 = gdk_pixbuf_new_from_file("gnumeric.png", &amp;err);
 p3 = gdk_pixbuf_new_from_file("blender.png", &amp;err);
 p4 = gdk_pixbuf_new_from_file("inkscape.png", &amp;err);
</pre>

<p>
We load 4 icons from the disk.
</p>

<pre class="explanation">
 list_store = gtk_list_store_new(NUM_COLS, 
     G_TYPE_STRING, GDK_TYPE_PIXBUF);
</pre>

<p>
We will store textual and pixbuf data. 
</p>

<pre class="explanation">
 gtk_list_store_append(list_store, &amp;iter);
 gtk_list_store_set(list_store, &amp;iter, COL_DISPLAY_NAME, 
     "ubuntu", COL_PIXBUF, p1, -1);
</pre>

<p>
This code adds a new icon to the icon view. 
</p>

<pre class="explanation">
  icon_view = gtk_icon_view_new_with_model(init_model());
  gtk_container_add(GTK_CONTAINER(sw), icon_view);
	
  gtk_icon_view_set_text_column(GTK_ICON_VIEW(icon_view),
      COL_DISPLAY_NAME);
  gtk_icon_view_set_pixbuf_column(GTK_ICON_VIEW(icon_view),
      COL_PIXBUF);
</pre>

<p>
We create a <b class="keyword">GtkIconView</b> widget and set an icon 
and it's name to the icon view. 
</p>



<br>
<img src="/img/gui/cgtk/iconview.png" alt="Icon View">
<div class="figure">Figure: Icon View</div>
<br>

<hr class="btm">

<p>
In this part of the GTK+ tutorial, we have continued covering GTK+ widgets.
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified April 2, 2008  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


